<template>
	<view class="content">
		<image class="bgImg" src="../../static/bg.png"></image>
		<image alt="logo" class="logo-img" mode="widthFix" src="../../static/logo.png"></image>
		<label class="des">
			<text>{{$t('index.home.title')}}</text>
		</label>
		<view class="cell" @click="goToHW()">
			<image alt="logo" class="hw" src="../../static/hw_device.png"></image>
			<image alt="logo" class="add" src="../../static/add.png"></image>
			<view class="rightView">
				<label class="name">
					<text>{{$t('index.home.hw')}} </text>
				</label>
			</view>
		</view>
		
		<view class="cellSecond" @click="goToAIR()">
			<image alt="logo" class="air" src="../../static/air_device.png"></image>
			<image alt="logo" class="add" src="../../static/add.png"></image>
			<view class="rightView">
				<label class="nameSecond">
					<text>{{$t('index.home.A8')}}</text>
				</label>
			</view>
		</view>
		
<!-- 		<view class="cellThree" @click="goToFUN()">
			<image alt="logo" class="fun" src="../../static/fun_device.png"></image>
			<image alt="logo" class="add" src="../../static/add.png"></image>
			<view class="rightView">
				<label class="nameThree">
					<text>FUN</text>
				</label>
			</view>
		</view> -->
		
		<view class="cellFour" @click="goToS5()">
			<image alt="logo" class="s5" src="../../static/s5_device.png"></image>
			<image alt="logo" class="add" src="../../static/add.png"></image>
			<view class="rightView">
				<label class="nameFour">
					<text>{{$t('index.home.S5')}}</text>
				</label>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onShow() {
			
		},
		onLoad() {
			let that = this
			
		},
		onUnload() {

		},
		methods: {
			goToHW(){
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: "../hw/index"
				});
			},
			goToAIR(){
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: "../air/index?device=A8"
				});
			},
			goToFUN(){
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: "../air/index?device=FUN"
				});
			},
			goToS5(){
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: "../air/index?device=S5"
				});
			},
			onShareAppMessage() {},
			onShareTimeline() {},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
	}

	.bgImg {
		height: 140%;
		left: 0;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: -1
	}

	.logo-img {
		height: 75px;
		margin-left: 10%;
		margin-top: 15%;
		width: 235px
	}

	.des {
		color: #92735c;
		font-size: 12px;
		margin: 30px 10% 0
	}

	.cell {
		background-color: hsla(0, 0%, 100%, .5);
		border-radius: 15px;
		height: 235px;
		margin: 50px 15px 0px 15px
	}

	.hw {
		height: 177px;
		margin-left: 32px;
		margin-top: 30px;
		width: 56px
	}
	
	.cellSecond {
		background-color: hsla(0, 0%, 100%, .5);
		border-radius: 15px;
		height: 255px;
		margin: 15px 15px 0px 15px
	}
	
	.cellThree{
		background-color: hsla(0, 0%, 100%, .5);
		border-radius: 15px;
		height: 235px;
		margin: 15px 15px 0px 15px
	}
	.cellFour{
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 15px;
		height: 215px;
		margin: 15px 15px 30px 15px
	}
	.fun {
		height: 207px;
		margin-left: 26px;
		margin-top: 15px;
		width: 70px;
	}
	
	.s5{
		height: 177px;
		margin-left: 32px;
		margin-top: 15px;
		width: 65px;
	}
	
	.air {
		height: 227px;
		margin-left: 32px;
		margin-top: 15px;
		width: 56px;
	}

	.name {
		margin-right: 15px;
		margin-top: 195px;
	}
	.nameSecond {
		margin-right: 15px;
		margin-top: 215px;
		text-align:right;
	}
	
	.nameThree {
		margin-right: 20px;
		margin-top: 140px;
		text-align:right;
	}
	
	.nameFour {
		margin-right: 15px;
		margin-top: 175px;
		text-align:right;
	}

	.add {
		position: absolute;
		float: right;
		height: 37px;
		right: 25px;
		margin-top: 15px;
		width: 37px
	}


	.rightView {
		display: flex;
		flex-direction: column;
		float: right;
		position: relative
	}
</style>
